<!--SVG图标-->

<template>
  <div class="w-h-full svg-icon-comp" :style="Object.assign({}, styleObject)">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div class="w-h-full" @click="imgSvgClickHandler" style="cursor:pointer;">
      <img class="img-svg" :src="imageSrc" crossorigin="anonymous"/>
    </div>
  </div>
</template>

<script>

import FuncCompMixin from '@/mixin/FuncCompMixin'
import PnDesigner from '@/utils/PnDesigner'

const _this = {
  name: 'SvgIconComp', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      relativePath: '',
      width: '100%',
      height: '100%',

      color: '#fff',

      clickHandleScript: '',

      filter: {
        blur: 0, // 高斯模糊 单位px
        brightness: 100, // 亮度 0-200%
        contrast: 100, // 对比度 0-200%
        grayscale: 0, // 灰度 0-100%
        hueRrotate: 0, // 色相 0-360deg
        invert: 0, // 反色 0-100%
        saturate: 100, // 饱和度 0-200%
        sepia: 0, // 褐色 0-200%
      }

    }, PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildMouseInteractionConfiguration())
  },
  data() {
    return {}
  },
  created() {

  },
  mounted() {
    this.init();

    this.$nextTick(() => {
      document.querySelectorAll('img.img-svg').forEach(function (img) {
        let imgID = img.id;
        let imgClass = img.className;
        let imgURL = img.src;

        fetch(imgURL).then(function (response) {
          return response.text();
        }).then(function (text) {
          let parser = new DOMParser();
          let xmlDoc = parser.parseFromString(text, "text/xml");
          let svg = xmlDoc.getElementsByTagName('svg')[0];
          if (typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
          }
          if (typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass + ' replaced-svg');
          }
          svg.removeAttribute('xmlns:a');
          if (!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
          }
          img.parentNode.replaceChild(svg, img);
        });

      });
    })
  },
  methods: {
    init() { // 组价初始化函数，函数名必须使用init，不可更改
      this.initDatasource(() => {
        this.runCustomGlobalJsCode()
      }, (result) => {
        this.runCustomGlobalJsCode()
      });
    },
    imgSvgClickHandler () {
      this.$PnDesigner.launchMouseInteraction(this.component.compConfigData, 'click');
      eval(this.component.compConfigData.clickHandleScript)
    }
  },
  computed: {
    imageSrc() {
      if (this.component.compConfigData.relativePath) {
        // 加上?not-from-cache-please在地址结尾是为了配合crossorigin="anonymous"解决图片加载报cors跨域错误的问题
        return window.g.AXIOS_BASE_URL + this.component.compConfigData.relativePath + '?not-from-cache-please'
      }
    },
    styleObject() {
      return {
        '--width': this.component.compConfigData.width,
        '--height': this.component.compConfigData.height,
        '--color': this.component.compConfigData.color
      }
    },
    filterObj() {
      return 'blur(' + this.component.compConfigData.filter.blur + 'px) ' +
          'brightness(' + this.component.compConfigData.filter.brightness + '%) ' +
          'contrast(' + this.component.compConfigData.filter.contrast + '%) ' +
          'grayscale(' + this.component.compConfigData.filter.grayscale + '%) ' +
          'hue-rotate(' + this.component.compConfigData.filter.hueRrotate + 'deg) ' +
          'invert(' + this.component.compConfigData.filter.invert + '%) ' +
          'saturate(' + this.component.compConfigData.filter.saturate + '%) ' +
          'sepia(' + this.component.compConfigData.filter.sepia + '%)'
    }
  }
};

export default _this
</script>

<style scoped>
>>> .img-svg {
  width: var(--width);
  height: var(--height);
  padding: 5px;
}

>>> .img-svg path {
  fill: var(--color);
}

@keyframes opacity-change {
  0% {
    opacity: 0
  }
  50% {
    opacity: 0.8
  }
  100% {
    opacity: 0
  }
}
</style>
